<template>
  <div class="banner-container">
    <!-- 左侧菜单 -->
    <div class="menu-wrapper">
      <div class="main-menu">
        <div class="menu-item" 
             v-for="(item, index) in menuData" 
             :key="index"
             @mouseenter="showSubmenu(index)"
             @mouseleave="hideSubmenu(index)">
          {{ item.title }}
          
          <!-- 子菜单 -->
          <div class="submenu" 
               v-if="item.isHover"
               @mouseenter="keepSubmenu(index)"
               @mouseleave="hideSubmenu(index)">
            <div class="submenu-section" 
                 v-for="(section, sIndex) in item.children" 
                 :key="sIndex">
              <div class="submenu-title">{{ section.title }}</div>
              <div class="submenu-items">
                <span v-for="(subItem, subIndex) in section.items" 
                      :key="subIndex"
                      class="submenu-item">
                  {{ subItem }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧轮播图 -->
    <div class="banner-content">
      <div class="carousel">
        <transition-group name="slide">
          <div class="carousel-item" 
               v-for="(item, index) in carouselItems" 
               :key="item.id"
               v-show="currentIndex === index">
            <img :src="item.imgUrl" :alt="item.title">
          </div>
        </transition-group>

        <!-- 轮播指示器 -->
        <div class="carousel-indicators">
          <span v-for="(item, index) in carouselItems" 
                :key="item.id"
                :class="['indicator', { active: currentIndex === index }]"
                @click="setCurrentIndex(index)">
          </span>
        </div>

        <!-- 左右箭头 -->
        <div class="carousel-arrows">
          <div class="arrow left" @click="prev">
            <i class="arrow-icon">&#60;</i>
          </div>
          <div class="arrow right" @click="next">
            <i class="arrow-icon">&#62;</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          title: '有品推荐/手机数码',
          isHover: false,
          children: [
            {
              title: '精���分类',
              items: ['空调', 'Note 系列', '数字系列', '平板电脑', '笔记本', 'K系列']
            },
            {
              title: '精选专区',
              items: ['清凉电器', '净化器', '加湿器', '耳机', '摄像头', '洗衣机']
            },
            {
              title: '手机数码',
              items: ['小米手机', '数字系列', '折叠屏', 'CIVI系列']
            },
            {
              title: 'Redmi',
              items: ['K系列', 'Turbo系列', 'Note 系列', 'Redmi数字']
            },
            {
              title: '影音周边',
              items: ['投影机', '音响/音箱', '麦克风', '家庭影院', '投影配件', '特殊商品']
            },
            {
              title: '智能穿戴',
              items: ['智能手表', '小米手环', '运动手表', 'AR/VR']
            },
            {
              title: '手机周边',
              items: ['充电器', '移动电源', '三角架/云台', '数据线', '手机壳/保护套', '手机贴膜', '手机支架', '创意配件']
            }
          ]
        },
        {
          title: '小米自营/小米电视',
          isHover: false,
          children: [
            {
              title: '手机数码',
              items: ['小米手机', 'Redmi手机', '手表', '手环', '耳机', '壳膜配件', '腕带配件', '充电器配件']
            },
            {
              title: '家用大电',
              items: ['空调', '小米电视', 'Redmi电视', '电视盒子', '投影机', '米家洗衣机', '米家冰箱', '安装服务']
            },
            {
              title: '新品发布',
              items: ['新品推荐', '手机数码', '家装大电', '智能生活']
            },
            {
              title: '电脑办公',
              items: ['笔记本', '平板', '显示器', '路由器', '打印机', '鼠标及配件']
            },
            {
              title: '智能生活',
              items: ['摄像头', '灯饰照明', '网关/传感器', '照片打印机', '儿童手表', '行车记录仪', '电源充电器', '装饰材料', '门锁']
            }
          ]
        },
        {
          title: '电脑办公/大家电',
          isHover: false,
          children: [
            {
              title: '办公设备',
              items: ['外设产品', '配件/耗材', '打印机', '扫描仪', '升降桌', '路由器', '插线板']
            },
            {
              title: '电脑',
              items: ['台式机', '笔记本', '平板电脑', '游戏本', '显示器', '一体机', 'DIY存储配件', 'DIY电源配件', '笔记本配件']
            },
            {
              title: '存储周边',
              items: ['移动硬盘', '网络存储', '存储卡', 'U盘']
            },
            {
              title: '大家电',
              items: ['冰箱', '洗衣机', '空调', '净水热水器']
            },
            {
              title: '厨房电器',
              items: ['油烟机', '燃气灶', '消毒柜', '洗碗机', '微波炉']
            }
          ]
        },
        {
          title: '小家电/美食酒饮',
          isHover: false,
          children: [
            {
              title: '厨房小电',
              items: ['热卖新品', '饮水机/咖啡机', '蒸箱烤箱', '创意厨电', '电饭煲/电火锅', '破壁机/榨汁机', '多用途锅']
            },
            {
              title: '清洁电器',
              items: ['新品推荐', '扫地机器人', '洗地机', '吸尘器', '擦窗机器人', '蒸汽电动拖把', '除螨仪', '清洁机']
            },
            {
              title: '环境电器',
              items: ['新品推荐', '空气净化器', '加湿器', '品牌风扇', '香薰机', '除湿机']
            }
          ]
        },
        {
          title: '家具家装/服装配饰',
          isHover: false,
          children: [
            {
              title: '智能安防',
              items: ['摄像头', '智能门锁', '智能门', '猫眼', '门铃', '保险箱/柜', '防丢设备']
            },
            {
              title: '卧室家具',
              items: ['床', '床垫', '衣柜', '梳妆台/凳']
            },
            {
              title: '客厅家具',
              items: ['沙发', '边桌/茶几', '电视柜', '衣帽架', '鞋柜']
            }
          ]
        },
        {
          title: '日常元素/有品海购',
          isHover: false,
          children: [
            {
              title: '日常用品',
              items: ['收纳用品', '雨伞雨具', '驱蚊用品', '净化除味', '浴室用品', '厨房用品']
            },
            {
              title: '有品海购',
              items: ['数码配件', '生活日用', '个护健康', '运动户外', '箱包服饰']
            }
          ]
        },
        {
          title: '手表首饰/出行车品',
          isHover: false,
          children: [
            {
              title: '手表首饰',
              items: ['智能手表', '时尚手表', '眼镜', '首饰配饰']
            },
            {
              title: '出行车品',
              items: ['平衡车', '滑板车', '自行车', '��动车', '车载充电器', '行车记录仪']
            }
          ]
        },
        {
          title: '家纺厨具/美妆个护',
          isHover: false,
          children: [
            {
              title: '家纺',
              items: ['床品套件', '被子', '枕头', '毛巾浴巾', '地毯地垫']
            },
            {
              title: '美妆个护',
              items: ['面部护理', '身体护理', '口腔护理', '美妆工具', '男士护理']
            }
          ]
        },
        {
          title: '鞋靴箱包/医疗健康',
          isHover: false,
          children: [
            {
              title: '鞋靴箱包',
              items: ['休闲鞋', '运动鞋', '皮鞋', '箱包', '钱包']
            },
            {
              title: '医疗健康',
              items: ['血压计', '体温计', '血糖仪', '制氧机', '雾化器', '康复器材']
            }
          ]
        },
        {
          title: '日用百货/母婴亲子',
          isHover: false,
          children: [
            {
              title: '日用百货',
              items: ['纸巾湿巾', '衣物清洁', '家庭清洁', '收纳用品']
            },
            {
              title: '母婴亲子',
              items: ['奶瓶奶嘴', '婴儿车', '玩具', '童装', '纸尿裤']
            }
          ]
        },
        {
          title: '运动户外/宠物生活',
          isHover: false,
          children: [
            {
              title: '运动户外',
              items: ['运动服饰', '健身器材', '户外装备', '运动鞋', '游泳用品']
            },
            {
              title: '宠物生活',
              items: ['猫粮', '狗粮', '猫砂', '宠物玩具', '宠物用品']
            }
          ]
        }
      ],
      currentIndex: 0,
      carouselItems: [
        {
          id: 1,
          title: '轮播图1',
          imgUrl: require('@/assets/images/image.png')
        },
        {
          id: 2,
          title: '轮播图2',
          imgUrl: require('@/assets/images/im2.png')
        },
        {
          id: 3,
          title: '轮播图3',
          imgUrl: require('@/assets/images/i3.png')
        }
      ],
      timer: null
    }
  },
  methods: {
    showSubmenu(index) {
      this.menuData.forEach(item => item.isHover = false);
      this.menuData[index].isHover = true;
    },
    hideSubmenu(index) {
      setTimeout(() => {
        this.menuData[index].isHover = false;
      }, 100);
    },
    keepSubmenu(index) {
      this.menuData[index].isHover = true;
    },
    setCurrentIndex(index) {
      this.currentIndex = index
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.carouselItems.length
    },
    prev() {
      this.currentIndex = this.currentIndex === 0 
        ? this.carouselItems.length - 1 
        : this.currentIndex - 1
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.next()
      }, 3000)
    },
    stopTimer() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    }
  },
  mounted() {
    this.startTimer()
  },
  beforeUnmount() {
    this.stopTimer()
  }
}
</script>

<style scoped>
.banner-container {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 460px;
}

.menu-wrapper {
  position: relative;
  width: 235px;
  z-index: 10;
}

.main-menu {
  background: #826c5b;
  width: 100%;
}

.menu-item {
  position: relative;
  padding: 12px 20px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.menu-item:hover {
  background: #6c5844;
}

.submenu {
  position: absolute;
  left: 235px;
  top: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  min-width: 600px;
  z-index: 100;
  padding: 20px;
  border-radius: 4px;
}

.submenu-section {
  margin-bottom: 20px;
}

.submenu-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  font-size: 14px;
}

.submenu-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.submenu-item {
  padding: 5px 10px;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

.submenu-item:hover {
  color: #ff6700;
}

.banner-content {
  flex: 1;
  position: relative;
}

.carousel {
  position: relative;
  width: 100%;
  height: 460px;
  overflow: hidden;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s;
}

.indicator.active {
  background: #fff;
  transform: scale(1.2);
}

.carousel-arrows .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 70px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.arrow.left {
  left: 0;
}

.arrow.right {
  right: 0;
}

.arrow:hover {
  background: rgba(0, 0, 0, 0.4);
}

.arrow-icon {
  font-size: 20px;
}

/* 轮播图过渡效果 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}

.slide-enter-to,
.slide-leave-from {
  transform: translateX(0);
}
</style>